<template lang='pug'>
  .step-1
    .form-shebao-title.font-16.font-weight 合同信息
    Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150")
      Row(type="flex" justify="start")
        Col(span="24")
          FormItem(label="档案号：")
            Input.input-has-border(v-model="formValidate.documentNo" placeholder="请输入" style="width:300px")
        Col(span="24")
          FormItem(label="合同编号：" )
            Input.input-has-border(v-model="code" placeholder="请输入" style="width:300px" disabled)
        Col(span="24")
          FormItem(label="合同年限：" prop="duration")
            Input.input-has-border(v-model="formValidate.duration" placeholder="请输入" style="width:300px")
        Col(span="24")
          FormItem(label="合同开始时间：" prop="startDate")
            DatePicker.input-has-border(v-model="formValidate.startDate" type="date" placeholder="请选择" style="width:300px")
        Col(span="24")
          FormItem(label="合同结束时间：" prop="endDate")
            DatePicker.input-has-border(v-model="formValidate.endDate" type="date" placeholder="请选择" style="width:300px")
        Col(span="24")
          FormItem(label="附件上传：" prop="fileString")
            Input(v-model="formValidate.fileString" style="display:none")
            Upload(:before-upload="createHandleUpload" multiple ref="addUpload" :show-upload-list="true" action="")
              Button(type="info" icon="ios-cloud-upload-outline") 点击上传
            template(v-for="(item, index) in formValidate.file")
              .my-tag.mr-20
                .my-tag-inner {{item.name}}
                .img-close.ivu-icon.ivu-icon-ios-close(@click="deleteFile(index)")
        Col(span="24")
          FormItem(label="备注：")
            Input.input-has-border(v-model="formValidate.remark" type="textarea" placeholder="请输入" style="width:300px")   
</template>

<script>
import dataApi from '@/api/data'
export default {
  name:'stpe_4',
  props:{
    customerId: String,
    code: String
  },
  data () {
    return {
      // 基本信息
      formValidate: {
        documentNo: '', // 档案号
        // code: '', // 合同编号
        duration: '', // 合同年限
        startDate: '', // 合同开始时间
        endDate: '', // 合同结束时间
        file: [], // 合同附件
        fileString: '',
        remark: '' // 合同备注
      },
      // 验证规则
      ruleValidate: {
        // code: [
        //   { required: true, message: '编码不能为空', trigger: 'blur' }
        // ],
        duration: [
          { required: true, message: '合同年限不能为空', trigger: 'blur' }
        ],
        startDate: [
          { required: true, type: 'date', message: '请选择合同开始时间', trigger: 'change' }
        ],
        endDate: [
          { required: true, type: 'date', message: '请选择合同结束时间', trigger: 'change' }
        ],
        fileString: [
          { required: true,  message: '请上传合同附件', trigger: 'change' }
        ]
      }
    }
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    // if (this.formValidate.code) {
    //   return false
    // } else {
    //   dataApi.getDefaultContractNo().then(res => {
    //     this.formValidate.code = res.data.data
    //   })
    // }
  },

  methods: {
    deleteFile (index) {
      this.formValidate.file.splice(index, 1)
      if (this.formValidate.file.length < 1) {
        this.formValidate.fileString = ''
      }
    },
    // 上传合同附件
    createHandleUpload (file) {
      const fileExt = file.name.split('.').pop().toLocaleLowerCase()
      console.log('file: ', file)
      console.log('fileExt: ', fileExt)
      if (fileExt === 'exe') {
        this.$Notice.warning({
          title: '文件类型错误',
          desc: '不能上传.exe文件'
        })
        return false
      } else {
        this.formValidate.fileString = file.name
        this.formValidate.file.push(file)
        return false
      }
    },
    // 保存--合同信息
    stepSubmit () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          let formData = new FormData()
          formData.append('documentNo', this.formValidate.documentNo)
          formData.append('code', this.code)
          formData.append('duration', this.formValidate.duration)
          formData.append('startDate', this.$moment(this.formValidate.startDate).format('YYYY-MM-DD'))
          formData.append('endDate', this.$moment(this.formValidate.endDate).format('YYYY-MM-DD'))
          formData.append('remark', this.formValidate.remark)
          formData.append('customerId', this.customerId)
          this.formValidate.file.forEach(item => {
            formData.append('atta', item)
          })

          dataApi.postContract(formData, this.customerId).then((res) => {
            if (res.data.success) {
              this.$Message.success(res.data.message)
              this.$emit('on-next', 5)
            } else {
              
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        }
      })
    },
    // 重置数据
    refreshData () {
      Object.assign(this.$data, this.$options.data())
      this.$refs['formValidate'].resetFields()
    }
  },

  watch: {
  },

}

</script>
<style lang='less' scoped>
  .d-flex{
    display: flex;
    align-items: center;
  }
  .position-relative{
    .license-img{
      width: 100%;
      height: 100%;
      cursor: pointer;
      line-height: 80px;
      text-align: center;
    }
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .img-close{
      position: absolute;
      top: -8px;
      right: -8px;
      z-index: 9;
      cursor: pointer;
    }
  }
</style>